import React, { useState } from 'react'
import _ from 'loadsh'
import { func } from 'prop-types'


export default function LayOut () {
  const [count, setCount] = useState(0)
  const [str, setStr] = useState('猪来了')
  const [obj, setObj] = useState({ username: '小猪' })
  const [arr, setArr] = useState([1, 2, 2, 2])
  function add () {
    setCount(preCount => preCount + 1)
  }
  function reverseStr () {
    setStr(str.split('').reverse().join(''))
  }
  /**
   * 一旦到了引用类型
   * state初始化不允许改动
   */
  function changeObj () {
    //浅拷贝
    // const newObj = Object.create(obj)
    // const newObj = Object.assign({},obj)
    // const newObj = { ...obj }
    //深拷贝
    // const newObj = JSON.parse(JSON.stringify(obj))
    const newObj = _.cloneDeep(obj)
    newObj.username = '猪仔'
    setObj(newObj)
  }
  function changeArr () {
    const newArr = [...arr]
    newArr[0] = 100
    setArr(newArr)
  }
  return (
    <div>
      <button onClick={add}>+</button>
      <p>{count}</p>
      <hr />
      <button onClick={reverseStr}>str反向</button>
      <p>{str}</p>
      <hr />
      <button onClick={changeObj}>修改obj</button>
      <p>{obj.username}</p>
      <hr />
      <button onClick={changeArr}>修改数组第一项</button>
      <p>{arr[0]}</p>
    </div>
  )
}
